import React, { useEffect, useState } from 'react'
import { useNavigate } from "react-router-dom"
import { NavBar, Tabs, PullRefresh, Toast } from 'react-vant';
import "./myscss/HzXiaoxi.scss"
import axios from "axios"
axios.defaults.baseURL = "http://localhost:3000"
export default function HPage1() {
    const navigate = useNavigate()
    let [allXiao, setAllXiao] = useState([])
    let [sval, setSval] = useState("")

    let gethcy_xiaox = async () => {
        let { data: { data } } = await axios.get("/gethcy_xiaox")
        if(sval.length!==0){
            data = data.filter(item=>item.content.includes(sval))
        }
        setAllXiao(data)
    }
    useEffect(() => {
        gethcy_xiaox()
    }, [sval])
    const formatDateTime = (isoDateString) => {
        const date = new Date(isoDateString);
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false, // 24小时制
        };
        // 使用 toLocaleString 来格式化日期和时间，并做适当的替换
        return date.toLocaleString('zh-CN', options).replace(/\//g, '-').replace(',', '');
    };
    return (
        <div id='HzXiaoxi'>
            <div className='top1'>
                <NavBar
                    leftText="消息列表"
                    onClickLeft={() => navigate('/Hzgl/HPage1')}
                />
                <p className='toptxt' onClick={() => { navigate("/Hzgl/AddXiao") }}>新建消息</p>
            </div>
            <div className='top2'>
                <p className='top2logo'><svg t="1725453526468" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4524" width="28" height="28"><path d="M466.048 128a337.92 337.92 0 0 1 338.048 337.664 336.128 336.128 0 0 1-79.552 217.6c0.64 0.256 1.28 0.64 1.92 1.088l4.8 3.84 152.896 143.104a37.376 37.376 0 0 1-46.464 58.368l-4.8-3.84-152.832-143.04a37.376 37.376 0 0 1-7.552-9.792c-56.96 44.16-128.64 70.4-206.464 70.4A337.92 337.92 0 0 1 128 465.664 337.92 337.92 0 0 1 466.048 128z m0 74.88a262.976 262.976 0 0 0-263.104 262.784 262.976 262.976 0 0 0 263.104 262.848 262.976 262.976 0 0 0 263.104-262.848A262.976 262.976 0 0 0 466.048 202.88z" fill="#515151" p-id="4525"></path></svg></p>
                <input type="text" value={sval} onChange={(e) => { setSval(e.target.value) }} placeholder="搜索消息关键字" />
            </div>
            <div className='mbox'>
                <p>消息通知</p>
            </div>
            {allXiao.map(item => (
                <div className='list' key={item._id}>
                    <p className='txt1'>{item.title}</p>
                    <p className='txt2'>{item.content}</p>
                    <p className='txt3'>{formatDateTime(item.time)}</p>
                    <p className='txt4'>接收人:{item.soupropel}</p>
                </div>
            ))}
        </div>
    )
}
